<%@ page language="java" contentType="text/html; charset=UTF-8"
	pageEncoding="UTF-8"%>
<%
	String path = request.getContextPath();
%>
<jsp:include page="/manage/inc/header.jsp"></jsp:include>
<jsp:include page="/manage/inc/menu.jsp"></jsp:include>

<!--/sidebar-->
<div class="main-wrap">

	<div class="crumb-wrap">
		<div class="crumb-list">
			<i class="icon-font"></i> <a href="<%=path%>/manage/index.jsp">首页</a><span
				class="crumb-step">&gt;</span> <a class="crumb-name"
				href="<%=path%>/manage/RoomTypeServlet?action=list">类型管理</a><span
				class="crumb-step">&gt;</span><span>新增房型</span>
		</div>
	</div>
	<div class="result-wrap">
		<div class="result-content">
			<form action="<%=path%>/manage/RoomTypeServlet?action=insert"
				method="post" id="myform" name="myform"
				enctype="multipart/form-data">
				<table class="insert-tab" width="100%">
					<tr>
						<th width="100"><i class="require-red">*</i>标题：</th>
						<td><input name="title" id="title" type="text"> <span
							id="titleMsg"></span></td>
					</tr>

					<tr>
						<th width="100"><i class="require-red">*</i>原价：</th>
						<td><input name="price" id="price" type="text"> <span
							id="priceMsg"></span></td>
					</tr>

					<tr>
						<th width="100"><i class="require-red">*</i>折扣价：</th>
						<td><input name="discountPrice" id="discountPrice"
							type="text"> <span id="discountPriceMsg"></span></td>
					</tr>

					<tr>
						<th width="100"><i class="require-red">*</i>封面图：</th>
						<td><!-- <input name="pic" id="pic" type="file"> --> 
						
						<img id="pici" src="<%=request.getContextPath()%>/static/images/plus.jpg"
                 				 class="am-img-responsive" style="width: 100px;height: 100px;" alt="" name="pica">    
                <input id="pic" hidden="none" type="file" name="pic" class="inputfile" onchange="reads(this)">
						<span id="picMsg"></span>
		
						</td>
					</tr>

					<tr>
						<th><i class="require-red">*</i>轮播图：</th>
						<td><img id="im1" src="<%=request.getContextPath()%>/static/images/plus.jpg"
                 				 class="am-img-responsive" style="width: 100px;height: 100px;" alt="" name="pica">
						<input  hidden="none" class="images" style="width: 200px;" name="images1" id="images1"	type="file" onchange="reads1(this)"> 
						     <span id="imagesMsg1"></span> 
						     <img id="im2" src="<%=request.getContextPath()%>/static/images/plus.jpg"
                 				 class="am-img-responsive" style="width: 100px;height: 100px;" alt="" name="pica">
							<input hidden="none"  style="width: 200px;" name="images2" id="images2"  class="images" type="file" onchange="reads2(this)">
							<span id="imagesMsg2"></span>
							<img id="im3" src="<%=request.getContextPath()%>/static/images/plus.jpg"
                 				 class="am-img-responsive" style="width: 100px;height: 100px;" alt="" name="pica">
							 <input hidden="none"   class="images" style="width: 200px;" name="images3" id="images3" type="file" onchange="reads3(this)">
							 <span id="imagesMsg3"></span> 
							 <img id="im4" src="<%=request.getContextPath()%>/static/images/plus.jpg"
                 				 class="am-img-responsive" style="width: 100px;height: 100px;" alt="" name="pica">
							<input  hidden="none"  class="images" style="width: 200px;" name="images4" id="images4" type="file" onchange="reads4(this)">
							 <span id="imagesMsg4"></span>
						</td>
					</tr>

					<tr>
						<th>简介：</th>
						<td><textarea name="description" class="common-textarea"
								id="description" cols="80" rows="10"></textarea> <span
							id="descriptionMsg"></span></td>
					</tr>
					<tr>
						<th></th>
						<td><input class="btn btn-primary btn6 mr10" id="subBtn"
							value="提交" type="button"> <input class="btn btn6"
							value="重置" type="reset"></td>
					</tr>
				</table>
			</form>
		</div>
	</div>
</div>
<!--/main-->

<jsp:include page="/manage/inc/footer.jsp"></jsp:include>
 <script type="text/javascript">
                $(function() {
                	 $("#im3").click(function() {
                         $("#images3").click();
                       });
                	 $("#im2").click(function() {
                         $("#images2").click();
                       });
                	$("#im1").click(function() {
                        $("#images1").click();
                      });
                	 $("#im4").click(function() {
                         $("#images4").click();
                       });
                  $("#pici").click(function() {
                    $("#pic").click();
                  });
                })
                function reads(obj) {
                  var file = obj.files[0];
                  var reader = new FileReader();
                  reader.readAsDataURL(file);
                  reader.onload = function(ev) {
                    $("#pici").attr("src",
                        ev.target.result);
                  }
                }
                
                  
                
                
                function reads1(obj) {
                  var file = obj.files[0];
                  var reader = new FileReader();
                  reader.readAsDataURL(file);
                  reader.onload = function(ev) {
                    $("#im1").attr("src",
                        ev.target.result);
                  }
                }
                
                 
                
                
                function reads2(obj) {
                  var file = obj.files[0];
                  var reader = new FileReader();
                  reader.readAsDataURL(file);
                  reader.onload = function(ev) {
                    $("#im2").attr("src",
                        ev.target.result);
                  }
                }
                 
                
                
                function reads3(obj) {
                  var file = obj.files[0];
                  var reader = new FileReader();
                  reader.readAsDataURL(file);
                  reader.onload = function(ev) {
                    $("#im3").attr("src",
                        ev.target.result);
                  }
                }
                 
                
                function reads4(obj) {
                  var file = obj.files[0];
                  var reader = new FileReader();
                  reader.readAsDataURL(file);
                  reader.onload = function(ev) {
                    $("#im4").attr("src",
                        ev.target.result);
                  }
                }

                
	$(function() {
		
		
		//原价验证
		$("#price").blur(function() {
			var price = $(this).val();
			var priceRe = /^\d+(\.\d+)?$/;
			if (!priceRe.test(price)) {
				$("#priceMsg").html("您输入的价格有误,请重新输入");
				$(this).select();
			} else {
				$("#priceMsg").empty();
			}
		});
		//折扣价验证
		$("#discountPrice").blur(function() {
			var price = $(this).val();
			var priceRe = /^\d+(\.\d+)?$/;
			if (!priceRe.test(price)) {
				$("#discountPriceMsg").html("您输入的价格有误,请重新输入");
				$(this).select();
			} else {
				$("#discountPriceMsg").empty();
			}
		});
		$("#title").blur(function() {

			var title = $.trim($("#title").val());
			if (title.length < 2) {
				$("#titleMsg").html("标题长度不能少于2个字符");
				$("#title").select();
				return;
			} else {
				$("#titleMsg").empty();
			}
		})
		$("#description").blur(function() {
			
		var description = $.trim($("#description").val());
		if (description.length < 4) {
			$("#descriptionMsg").html("简介的长度不少于4个字符");
			$("#description").select();
			return;
		} else {
			$("#descriptionMsg").html("");
		}
		})

		//提交按钮
		$("#subBtn").click(function() {
			var title = $.trim($("#title").val());
			if (title.length < 2) {
				$("#titleMsg").html("标题长度不能少于2个字符");
				$("#title").select();
				return;
			} else {
				$("#titleMsg").empty();
			}
			var description = $.trim($("#description").val());
			if (description.length < 4) {
				$("#descriptionMsg").html("简介的长度不少于4个字符");
				$("#description").select();
				return;
			} else {
				$("#descriptionMsg").html("");
			}
			
			if($("#pic").val().length==0){
				$("#picMsg").html("封面不能为空");
				return;
			}
			$("#picMsg").html("");
			var count=0;
			$(".images").each(function() {
				var file = $(this).val();
				if (file.length == 0) {
					$("#imagesMsg4").html("轮播图必须是四张");
					
					count++;
					return;
					
				}
			})
			if(count>0){
				return;
			}
			$("#myform").submit();
		})
	})
</script>